<template>
  <div class="product-management-details">
    <div class="app-main">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in slidebox" :key="index">
          <img :src="item.thumb">
        </mt-swipe-item>
      </mt-swipe>
      <div class="product-content">
        <div class="product-title">{{resData.commAttribName}}</div>
        <dl class="product-price" style="border-bottom: 1px dashed #eee;padding: 0 0 10px;margin: 0 0 6px;">
                <dd class="price">
                <span class="price-count">￥{{resData.purchasePrice}}</span>
                  <div class="price-tips">采购价</div>
                </dd>
                <dd class="price">
                <span class="price-count">￥{{resData.wholesalePrice}}</span>
                  <div class="price-tips">批发价</div>
                </dd>
                <dd class="price">
                <span class="price-count">￥{{resData.retailPrice}}</span>
                  <div class="price-tips">销售价</div>
                </dd>
          <!--<span class="item-factory">{{item.factory}}</span>-->
        </dl>
        <dl class="product-price product-price-kucun">
          <dd class="price">
            <span class="price-count">{{resData.onHandQty}}</span>
            <div class="price-tips">当前库存</div>
          </dd>
          <!--<dd class="price">-->
            <!--<span class="price-count">￥{{resData.wholesalePrice}}</span>-->
            <!--<div class="price-tips">批发价</div>-->
          <!--</dd>-->
          <!--<dd class="price">-->
            <!--<span class="price-count">￥{{resData.retailPrice}}</span>-->
            <!--<div class="price-tips">销售价</div>-->
          <!--</dd>-->
          <!--<span class="item-factory">{{item.factory}}</span>-->
        </dl>
      </div>

      <div class="module-body">
        <div class="title"></div>
        <dl class="details">

          <dd class="item"><span class="item-addon">原厂编码：</span><span class="item-content">{{resData.originalCode}}</span></dd>
          <dd class="item"><span class="item-addon">商品编码：</span><span class="item-content">{{resData.commAttribCode}}</span></dd>
          <dd class="item"><span class="item-addon">商品分类：</span><span class="item-content">{{resData.classify}}</span></dd>
          <dd class="item"><span class="item-addon">规 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格：</span><span class="item-content">{{resData.commLength}}*{{resData.commWidth}}</span></dd>
        </dl>
      </div>

      <div class="button-content-bottom">
        <div class="item">
          <mt-button type="default" @click.native="handleDelete">删除</mt-button>
        </div>
        <div class="item" v-if="resData.isActive=='0101'">
          <mt-button type="default" @click.native="handleActive('0102')">冻结</mt-button>
        </div>
        <div class="item" v-if="resData.isActive=='0102'">
          <mt-button type="danger" @click.native="handleActive('0101')">恢复</mt-button>
        </div>
        <div class="item">
          <mt-button type="primary" @click.native="handleModify">修改</mt-button>
        </div>
      </div>

      <mt-popup
        v-model="popupYuyue"
        position="bottom"
        class="popup-yuyue">
        <div class="button-content">
            <mt-button type="default" @click="popupYuyue = false">取消</mt-button>
            <mt-button type="primary" @click="">确定</mt-button>
        </div>

      </mt-popup>
    </div>
  </div>
</template>
<script>
  import { Header,Swipe, SwipeItem,MessageBox,Toast } from 'mint-ui';
  export default{
    data () {
      return {
        popupYuyue:false,
        resData:'',
        slidebox:[
          {
            id:1,
            thumb:'./static/img/img-none.jpg'
          },
        ],
      }
    },
    beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
    },
    mounted(){
      document.getElementsByTagName("body")[0].className="add_bg";
      this.getData();
    },
    methods:{

      getData(){
        var params = new URLSearchParams();
        params.append('form.commAttribId', this.$route.query.id);

        params.append('plateFormFlag','0101');
        this.$axios({
          method: 'post',
          url:'gp/app/commattribApp!getDetail.do?',
          data:params,
        }).then((res)=>{
          console.log(res)
        this.resData=res.data.object
      });
      },


      handleActive(code){
        MessageBox({
          title: '',
          message: '确认是否冻结/恢复该商品?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){



          var params = new URLSearchParams();
          params.append('form.commAttribId',this.$route.query.id);
          params.append('form.isActive',code);
          this.$axios({
            method: 'post',
            url:'gp/bu/commattrib!freeze1.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            Toast({
              message: '操作成功',
              position: 'middle',
              duration: 1500
            });
            this.getData()
          }else{
            Toast({
              message:'操作失败',
              position: 'middle',
              duration: 1500
            });
          }
        })

        };
      })
      },
      handleDelete(){
        MessageBox({
          title: '',
          message: '确认删除该商品?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){



          var params = new URLSearchParams();
          params.append('form.commAttribId',this.$route.query.id);
          this.$axios({
            method: 'post',
            url:'gp/bu/commattrib!deleteCommattrib.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 1500
            });
            setTimeout(()=>{
              this.$router.push({path:'/product-management'})
            },1500)
          }else{
            Toast({
              message:res.data.message,
              position: 'middle',
              duration: 1500
            });
          }
        })

        };
      })
      },
      handleModify(){

        this.$router.push({path:'/product-add',query: {id:this.$route.query.id}})
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .product-management-details{
    background: #fff;
  }
  .product-management-details .app-main{
    padding:0 0 50px;
  }
  .product-management-details .mint-swipe{
    background: #fff;
    height:160px;
    text-align: center;
    border-bottom:1px solid #eee;
  }
  .product-management-details .mint-swipe img{
    height: 100%;
  }
  .product-management-details .product-content{
    padding:14px 16px;
  }
  .product-management-details .product-price{
  padding:0 0 8px;
   color: red;
   font-size: 16px;
 }
  .product-management-details .product-price .price{
    font-size: 20px;
  }
  .product-management-details .product-title{
    margin:0 0 8px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }
  .product-management-details .product-price{
    display: flex;
    margin: 0;
  }
  .product-management-details .price{
    margin: 0;
    width: 30%;
    font-size: 15px;
  }
  .product-management-details .price-tips{
    padding:2px 0 0;
    font-size: 12px;
    color: #999;
  }
  .product-management-details .module-body .title{
    background: #f5f5f5;
    height: 4px;
  }
  .product-management-details .module-body .details {
    padding:12px 16px;
    font-size: 15px;
    color: #999;
    margin: 0; }
  .product-management-details .module-body .details .item {
    margin: 0;
    padding:4px 0;
  }
  .product-management-details .module-body .details .item-block {
    display: inline-block;
    margin-right: 1.7rem; }
  .product-management-details .module-body .details .item-addon {
    display: table-cell;
    vertical-align: top;
    width: 90px;
    color: #333; }
  .product-management-details .module-body .details .item-content {
    display: table-cell;
    vertical-align: top; }
  .product-management-details .button-content-bottom{
    background: #fff;
    padding:6px 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    height: 56px;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);

  }
  .product-management-details .button-content-bottom .item{
    width: 25%;
    padding:0 6px;
  }
  .product-management-details .button-content-bottom .mint-button{
    width: 100%;
    border-radius:3px;
    justify-content: center;
    font-size: 15px;
    box-shadow: none;
    height: 38px;

  }

  .product-management-details .popup-yuyue{
    width: 100%;
    min-height: 200px;
    overflow: auto;
  }
  .product-management-details .popup-yuyue .button-content{
    position: fixed;
    bottom: 0;
    left: 0;
    right:0;
    display: flex;
  }
  .product-management-details .popup-yuyue .button-content .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;

  }
  .product-management-details .item-factory{
    border: 1px solid red;
    margin-left: 8px;
    padding:0 4px;
    border-radius: 3px;
    font-size: 13px;
    letter-spacing:1px;
  }
</style>
